<template>
    <div >
        <el-form ref="form" :model="form" :inline="true"   class="search-form search-item" size="medium" label-width="100px">
            <el-form-item label="所属省市：">
                    <el-select 
                               v-model="searchForm.provinceId"
                               clearable
                               placeholder="请选择省"
                               v-on:change="getProv($event)"
                               >
                        <el-option v-for="item in prov" :value="item.provinceId" :label="item.provinceName" :key="item.provinceId">  </el-option>
                    </el-select>
                    <el-select  clearable  v-model="searchForm.cityId"  placeholder="请选择城市"  >
                        <el-option v-for="item in store.cityOptions" :value="item.cityId" :label="item.cityName" :key="item.cityId">  </el-option>
                    </el-select>
             </el-form-item>
              <el-form-item label="车架号：" >
                <el-input clearable v-model="searchForm.carVin"  ></el-input>
            </el-form-item>
             <el-form-item label="车辆信息：">
                <!-- <el-select
                clearable
                v-on:change="getcar($event)"
                placeholder="请选择品牌"
                v-model="searchForm.brandId">
                       <el-option v-for="(item,index) in caroptions" :key="index" :label="item.brandName" :value='item.brandId' ></el-option>
                </el-select> -->
                <el-select @change="getcar($event)" v-model="searchForm.brandId" placeholder="请选择品牌"  clearable>
                  <el-option-group v-for="group in store.brandOptions" :key="group.initial" :label="group.initial">
                    <el-option v-for="item in group.brandInfo" :key="item.brandId" :label="`${group.initial} - ${item.brandName}`" :value="item.brandId">
                    </el-option>
                  </el-option-group>
                </el-select>
                  <el-select
                  clearable
                  placeholder="请选择车系"
                  v-model="searchForm.seriesId">
                       <el-option v-for="(item, index) in store.seriesOptions" :label="item.seriesName" :value="item.seriesId"  :key="index"></el-option>
                </el-select>
            </el-form-item>
             <el-form-item label="市场名称：">
                <el-select
                clearable
                  v-model="searchForm.marketId">
                        <el-option v-for="item in marketOptions " :key="item.marketId" :label="item.marketName" :value="item.marketId">  </el-option>
                </el-select>
            </el-form-item>
                    
             <el-form-item label="审核时间" >
                <el-date-picker type="date" :editable='edit' v-model="searchForm.startTimeLast"  placeholder="选择日期"  value-format="yyyy-MM-dd">
                </el-date-picker> —
                 <el-date-picker type="date" :editable='edit' v-model="searchForm.endTimeLast"  placeholder="选择日期"  value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
             <el-form-item label="车商：">
            <el-select v-model="searchForm.shopId" clearable  :disabled="this.marketName ==''" ref="marketNames">
            <el-option v-for="item in store.shopOptions" :label="item.shopName" :value="item.shopId" :key="item.shopManageId"></el-option>
            </el-select>
            </el-form-item>  
             <el-form-item label="首次申请："  >
                <el-date-picker type="date" :editable='edit' v-model="searchForm.startTimeFirst" name="marketCreateTime"  placeholder="选择日期"  value-format="yyyy-MM-dd">
                </el-date-picker> —
                 <el-date-picker type="date" :editable='edit' v-model="searchForm.endTimeFirst" name="marketCreateTime" placeholder="选择日期"  value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
              <el-form-item label="检测状态：">
            <el-select v-model="searchForm.carDetectState" clearable >
            <el-option v-for="item in findstateList" :label="item.name" :value="item.value" :key="item.value"></el-option>
            </el-select>
            </el-form-item>
             <el-form-item label="审核结果：" >
            <el-select v-model="searchForm.carStockState" clearable >
            <el-option v-for="item in findresList" :label="item.name" :value="item.value" :key="item.value"></el-option>
            </el-select>
            </el-form-item>
             <el-button @click="findData" icon="el-icon-search" type="primary">查询</el-button>
            <el-button icon="el-icon-refresh" @click="clearSearch">重置</el-button>
        </el-form>
        <el-table
            v-loading="loading"
            border
            ref="multipleTable"
            :data="soucelist"
            tooltip-effect="dark"
            align="center"
            @selection-change="handleSelectionChange">
              <el-table-column label="首图" prop="carImageUrl" align="center" width="170" >
                <template slot-scope="scope" style="position:relative"   >
                  <div class="a-link" @click="turnToCarDetial(scope.row.carId)">
                    <img :src="imgUrl+scope.row.carImageUrl+'.r_300xh_200'" class="car-image" onerror="javascript:this.src='static/images/default.svg'"  >
                    <span v-if="scope.row.carAuthState == 10" class="car-auth">
                      <img src="static/images/mark.png" alt="" />
                    </span>
                    <div class="car-state" v-if="scope.row.carBargainPriceState"><em style="background: #FF6816;">特卖</em></div>
                    <div class="car-state" v-if="scope.row.carOrderState==1"><em>已预定</em></div>
                    <div class="car-state" v-if="scope.row.carPledgeState == 310"><em style="background: #f56e6d;">抵押中</em></div>
                  </div>
                </template>
            </el-table-column>
            <el-table-column label="车辆信息" min-width="200">
              <template slot-scope="scope">
                <h1 class="a-link" @click="turnToCarDetial(scope.row.carId)">{{scope.row.carTitle || '暂无标题'}}</h1>
                <p>车架号：{{scope.row.carVin}}</p>
                <p>所属市场：{{scope.row.cityName}}/{{scope.row.marketName }}</p>
                <p>车商：{{scope.row.shopName}}</p>
                </template>
                </el-table-column>
                <el-table-column
                prop="userShopId"
                label="车辆来源"
                align="center"
                show-overflow-tooltip>
                <template slot-scope="scope">
                <p v-if="scope.row.userShopId == null" style="cursor: pointer">市场{{scope.row.userShopId}}</p>
                <p v-else style="cursor: pointer">车商 </p>
              </template>
            </el-table-column>
            <el-table-column
            prop="carStockState"
            label="库存状态"
            align="center"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.carStockState  | filterCarStockState }}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="carDetectState"
            label="检测状态"
            align="center"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.carDetectState | filterCarDetectState}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="carLogCreateTimeFirst"
            label="首次申请时间"
             align="center"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <p v-if="scope.row.carLogCreateTimeFirst" style="cursor: pointer">{{scope.row.carLogCreateTimeFirst | filterDateForSec }}</p>
              <p v-else>--</p>
            </template>
            </el-table-column>
             <el-table-column
            prop="carStockState"
            label="审核结果"
             align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
               <p v-if="scope.row.carStockState =='0' || scope.row.carStockState =='20' || scope.row.carStockState =='1'" style="cursor: pointer">{{ scope.row.carStockState |  filterCarStateresult }}</p>
              <p v-else>--</p>
            </template>
            </el-table-column>
             <el-table-column
            prop=" userNameLast"
            label="审核人"
             align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.userNameLast || '--'}}</p>
            </template>
            </el-table-column>
             <el-table-column
             align="center"
            prop="carLogCreateTimeLast"
            label="审核时间"
            show-overflow-tooltip>
             <template slot-scope="scope">
              <p v-if="scope.row.carLogCreateTimeLast" style="cursor: pointer">{{ scope.row.carLogCreateTimeLast |  filterDateForSec }}</p>
              <p v-else>--</p>
            </template>
            </el-table-column>
             <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <el-button v-show="true" type="primary" size="mini" @click.native="handleRentInfo(scope.row.carId,scope.row.shopId)" v-if="scope.row.carStockState=='10'">审核</el-button>
           <el-button size="mini" @click.native="open(scope.row.carId,scope.row.carStockState)">审核记录</el-button>
        </template>
      </el-table-column>
        </el-table>
          <div style="margin-top: 20px" >
            <el-button @click="daochu()">导出</el-button>
          </div>
          <div class="footer">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-size="store.params.pageSize"
              :page-sizes="[5, 10, 20, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagesTotal"
             >
            </el-pagination>
          </div>
          <el-dialog title="" :visible.sync="dialogTableVisible" :center="true">
          <el-table  :data="tableData" border>
            <el-table-column
            prop="carLogCreateTime"
            label="时间"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.carLogCreateTime | filterDateForSec}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="user"
            label="操作人"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.user.userName}}</p>
            </template>
            </el-table-column>
            <el-table-column
            prop="carStateValue"
            label="操作"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p style="cursor: pointer">{{scope.row.carStateValue | filterCarStateValue}}</p>
            </template>
            </el-table-column>
             <el-table-column
            prop="carLogInfo"
            label="说明"
            align="center"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <p v-if="scope.row.carStateValue == '1'" style="cursor: pointer">{{scope.row.carLogInfo}}</p>
            </template>
            </el-table-column>
          </el-table>
        </el-dialog>
    </div>
</template>
<script>
export default {
  data() {
    return {
      loading:true,
      imgUrl: imageUrl,
      dialogTableVisible: false,
      isShow: true,
      carname: [],
      isAll: false,
      edit: false,
      tableData: [],
      isAllcheck: false,
      soucelist: [],
      multipleSelection: [],
      pagesTotal: 0,
      carStockState: 1,
      carDetectState: 500,
      findresList: [
        // 审核结果列表
        {
          value: 10,
          name: "未审核"
        },
        {
          value: 1,
          name: "不通过"
        },
        {
          value: 20,
          name: "通过"
        }
      ],
      findstateList: [
        {
          value: 500,
          name: "未检测"
        },
        {
          value: 520,
          name: "通过"
        },
        {
          value: 510,
          name: "不通过"
        }
      ],
      form: {},
      ind: 0,
      devire: {
        provinceId: "",
        cityId: "",
        marketId: "1",
        shopId: this.$shopId,
        carVin: "",
        carDetectState: "",
        startTimeFirst: "",
        endTimeFirst: "",
        startTimeLast: "",
        endTimeLast: "",
        carStockState: 10
      },
      searchForm: {
        brandId: "",
        seriesId: "",
        provinceId: "",
        cityId: "",
        marketId: "1",
        shopId: this.$shopId,
        carVin: "",
        carDetectState: "",
        startTimeFirst: "",
        endTimeFirst: "",
        startTimeLast: "",
        endTimeLast: "",
        carStockState: 10,
        pageIndex: 1,
        pageSize: 10
      },
      store: {
        marketOptions: [],
        seriesOptions: [],
        brandOptions: [],
        brandsOptions: [],
        shopOptions:[],
        cityOptions: [],
        provinceId: '',
        params: {
          pageSize: 10,
          pageIndex: 1,
          marketId: this.$marketId,
          brandId: "",
          seriesId: null
        }
      }
    };
  },
  computed: {
    prov() {
      return this.$store.state.common.provinceOptions;
    },
    // city() {
    //   return this.$store.state.common.cityOptions;
    // },
    carShops() {
      return this.$store.state.common.shopOptions;
    },
    marketOptions() {
      return this.$store.state.common.marketOptions;
    },
    caroptions() {
      return this.$store.state.common.brandsOptions;
    },
    // getCarsystem() {
    //   return this.$store.state.common.seriesOptions;
    // },
    marketName () {
      return this.searchForm.marketId;
    }
  },
  watch: {


  },
  created() {
    this.$store.commit("getProvinceOptions", this.prov);
    this.$store.commit("getShopOptions", this.store, this.carShops);
    this.$store.commit("getMarketOptions", this.store, this.marketOptions);
    this.$store.commit("getBrandsOptions", this.store, this.caroptions);
    this.getData();
  },
  mounted() {
    
    
  },
  methods: {
    getcar() {
      this.searchForm.seriesId = "";
      this.store.params.brandId = this.searchForm.brandId;
      if(this.searchForm.brandId != '') {
        this.store.brandId = this.searchForm.brandId;
         this.$store.commit("getSeriesOptions", this.store, this.getCarsystem);

      } else {
        this.store.seriesOptions = [];
      } 
    },
    open(carid, state) {
      let examoption = {
        carId: carid,
        carStateKey: "carStockState"
      };
      this.$axios
        .get(this.$api.getCarLogList, { params: examoption })
        .then(res => {
          this.tableData = res.data.result;
          console.log(this.tableData, '121212');
        });
      this.dialogTableVisible = true;
    },
    clearSearch() {
      this.searchForm = {
        brandId: "",
        seriesId: "",
        provinceId: "",
        cityId: "",
        marketName: "",
        shopId: this.$shopId,
        carVin: "",
        carDetectState: "",
        startTimeFirst: "",
        endTimeFirst: "",
        startTimeLast: "",
        endTimeLast: "",
        carStockState: "",
        pageSize: 10,
        pageIndex: 1
      };
      this.getData();
    },
    findData () {
     this.searchForm.pageIndex = 1;
      this.getData();
    },
    getData() {
      this.loading = true;
      this.$axios
        .get(this.$api.selectCarCheckList, { params: this.searchForm })
        .then(res => {
          this.soucelist = res.data.result;
          this.loading = false;
        });
      this.$axios
        .get(this.$api.selectCarCheckNum, { params: this.searchForm })
        .then(res => {
          this.pagesTotal = res.data.result.total;
        });
    },
    activated () {
      this.getData()

    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.searchForm.pageIndex = val;
      this.getData();
    },
    getProv() {
      this.searchForm.cityId = "";
      if (this.searchForm.provinceId != '') {
        this.store.provinceId= this.searchForm.provinceId;
        this.$store.commit("getCityOptions", this.store, this.city);
      } else {
        this.store.cityOptions = [];
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    toggleSelection(rows) {
      if (rows && !this.isAll) {
        this.isAll = true;
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row, true);
        });
      } else {
        this.isAll = false;
        this.$refs.multipleTable.clearSelection();
      }
    },
    daochu() {
      this.$message({
        message: '导出成功请稍后',
        type: 'success'
      });
      let str = `provinceId=${this.searchForm.provinceId}&cityId=${
        this.searchForm.cityId
      }&marketName=${this.searchForm.marketName}&shopId=${
        this.searchForm.shopId
      }&carVin=${this.searchForm.carVin}&carDetectState=${
        this.searchForm.carDetectState
      }&startTimeFirst=${this.searchForm.startTimeFirst}&endTimeFirst=${
        this.searchForm.endTimeFirst
      }&startTimeLast=${this.searchForm.startTimeLast}&endTimeLast=${
        this.searchForm.endTimeLast
      }&carStockState=${this.searchForm.carStockState}`;
      let url = `${window.defalutUrl}/controller/carCheck/exportCarCheckExcel`;
      window.location.href = url + "?" + str;

    },
    turnToCarDetial (val) {
      this.$router.push("/review/reviewForm/" + val);
    },
    handleEdit(val) {
      // 查看事件
      this.$router.push("/review/reviewForm/" + val);
      this.$bus.$emit("showFind", false);
    },
    handleRentInfo(val) {
      this.$router.push("/review/reviewForm/" + val + "?Show=true");
      this.$bus.$emit("showshen", true);
      this.isShow = true;
      this.$bus.$on('hidesh', () => {
        this.getData();
      })
       this.$bus.$on('back', () => {
        this.getData();
      })

      // 审核事件
    },
  }
};
</script>
<style>
 

</style>